import React, { useRef } from 'react'
import { Button, SearchBar, Space, Swiper,Toast } from 'antd-mobile'
import pic from '../../pic/111.png'
import pic1 from '../../pic/222.png'

import styles from '../home/Css/home.module.css'
import { Badge, TabBar } from 'antd-mobile'
import {
  AppOutline,
  MessageOutline,
  MessageFill,
  UnorderedListOutline,
  UserOutline,
  CouponOutline
} from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'
function Index() {
    console.log(pic);
    console.log(pic1);
    let nav=useNavigate()
    const colors = ['#ace0ff', '#bcffbd', '#e4fabd', '#ffcfac']
    const items = colors.map((color, index) => (
        <Swiper.Item key={index}>
          <div
            className={styles.content}
            style={{ background: color }}
            onClick={() => {
              Toast.show(`你点击了卡片 ${index + 1}`)
            }}
          >
            {index + 1}
          </div>
        </Swiper.Item>
      ))
      const tabs = [
        {
          key: 'home',
          title: '酒店',
          icon: <AppOutline />,
          badge: Badge.dot,
        },
        {
          key: 'todo',
          title: '机票',
          icon: <UnorderedListOutline />,
          badge: '5',
        },
        {
          key: '/hcp',
          title: '火车票',
          icon: <MessageOutline />,
        },
        {
          key: 'personalCenter',
          title: '旅游',
          icon: <UserOutline />,
        },
        {
            key: 'personalCenter',
            title: '门票',
            icon: <UserOutline />,
          },
      ]
      const tabs1 = [
        {
          key: 'home',
          title: '民宿/公寓',
          icon: <AppOutline />,
          badge: Badge.dot,
        },
        {
          key: 'todo',
          title: '情侣专区',
          icon: <UnorderedListOutline />,
        },
        {
          key: 'message',
          title: '周边游',
          icon: <MessageOutline />,
        },
        {
          key: 'personalCenter',
          title: '打车',
          icon: <UserOutline />,
        },
        {
            key: 'personalCenter',
            title: '跟团游',
            icon: <UserOutline />,
          },
      ]
  return (
    <div className={styles.pp}>
        <SearchBar placeholder='请输入内容' showCancelButton autoFocus />
    {/* 轮播图 */}
        <div className={styles.pp}>
        <Swiper autoplay>{items}</Swiper>
        </div >
        {/* 宫格 */}
        <div className={styles.pp}>
        <TabBar activeKey={Node} onChange={(key)=>nav(key)}>
          {tabs.map(item => (
            <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
          ))}
        </TabBar>
        <TabBar activeKey={Node} className={styles.pp}>
          {tabs1.map(item => (
            <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
          ))}
        </TabBar>
        </div>
          {/*  限时区*/}
         
          <h3 className={styles.pp}>限时特惠</h3>
          <div  className={styles.tt}>
          
          <div className={styles.ii}>
            <div>
            <CouponOutline /> 特价门票
            </div>
                <img className={styles.img} src="/src/pic/111.png" alt="" />
          </div>
          <div className={styles.ii}>
            <div >
            <CouponOutline /> 特价门票
            </div>
                <img className={styles.img} src="/src/pic/222.png" alt="" />
          </div>
          </div>
    </div>
  )
}

export default Index
